<!DOCTYPE html>
<html>
<head>
	<title>Title</title>
</head>
<body>

<div id="container">
	<canvas id="ID" width="800" height="500px" style="border: 1px solid #ccc">
		Your Browser does not support Canvas, please upgrade
	</canvas>
</div>

<script>
(function(){

	var canvas = document.getElementById('ID');
	var ctx = canvas.getContext('2d');

	console.log(canvas.width)
	console.log(canvas.height)

	// ctx.setLineDash([])
	ctx.beginPath();
	ctx.moveTo(150,20);
	ctx.arcTo(150,100,50,20,30)
	ctx.stroke();

	ctx.fillStyle = "blue";
	ctx.fillRect(150,20,10,10);

	ctx.fillStyle = 'red';
	// control point one
	ctx.fillRect(150, 100, 10, 10);
	// control point two
	ctx.fillRect(50, 20, 10, 10);

	ctx.setLineDash([5,5])
	ctx.moveTo(150, 20);
	ctx.lineTo(150,100);
	ctx.lineTo(50, 20);
	ctx.stroke();

	ctx.beginPath();
	ctx.arc(120,38,30,0,2*Math.PI);
	ctx.stroke();

	
}());
</script>
</body>
</html>